<template>
  <div>
    <template v-for="item in list">
      <!-- card-item组件 -->
      <card-item :item="item" :key="item.id">
        <template #tag>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
        <template #footer>
          <van-button size="small" @click="handleToCart(item)">
            加入购物车
          </van-button>
        </template>
      </card-item>
    </template>
  </div>
</template>

<script>
// 1. 调用vuex中的接口，
// 2. 将vuex中的state数据拿取过来
import { mapState, mapMutations, mapActions } from 'vuex'
import CardItem from '../components/CardItem.vue'
export default {
  components: { CardItem },
  created() {
    this.getCartList({ page: 1, size: 5 })
  },
  // 2. 将vuex中的state数据拿取过来
  computed: {
    ...mapState({
      list: (state) => state.cart.list,
    }),
  },
  methods: {
    ...mapActions(['getCartList']),
    ...mapMutations(['to_cart', 'set_list']),
    // 加入购物车
    handleToCart(item) {
      this.to_cart(item)
    },
  },
}
</script>
